<template>
  <div class="call_me_sub">
    <div class="call_me_sub_pc">
      <el-card class="card manager">
        <div slot="header" class="card_header">
          <svg-icon icon-class="cooperation" class="svg_icon"></svg-icon>
          <div class="card_header_title">商务合作</div>
        </div>
        <div class="manage_main">
          <Card class="manage_item" v-for="manager in callMe.callUsManagerList">
            <image-preview v-if="manager.qrcodeUrl" :src="manager.qrcodeUrl" width="5rem" height="5rem"/>
            <svg-icon v-else icon-class="manager" style="width: 5rem;height: 5rem"></svg-icon>
            <div class="manage_item-info">
              <span class="name"> · {{manager.name}}</span>
              <span class="telephone">
              tel：{{manager.telephone}}
              <el-tooltip v-if="manager.isWechat" effect="light" content="微信同号" placement="top">
                  <svg-icon icon-class="wechat" style="width: 1rem;height: 1rem;margin-right: 0.2rem"/>
              </el-tooltip>
              <el-tooltip effect="light" content="复制" placement="right">
                <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="manager.telephone"></el-link>
              </el-tooltip>
            </span>
            </div>
          </Card>
        </div>
      </el-card>

      <el-card class="card address">
        <div slot="header" class="card_header">
          <svg-icon icon-class="location" class="svg_icon"></svg-icon>
          <div class="card_header_title">联系地址</div>
        </div>
        <ul>
          <li v-for="address in callMe.callUsAddressList">
          <span class="name">
            {{address.name}}：
            <el-tooltip effect="light" content="复制" placement="right">
              <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="address.info"></el-link>
           </el-tooltip>
          </span><br>
            <span class="info">{{address.info}}</span>
          </li>
        </ul>
      </el-card>

      <el-card class="card email">
        <div slot="header" class="card_header">
          <svg-icon icon-class="email2" class="svg_icon"></svg-icon>
          <div class="card_header_title">邮箱</div>
        </div>
        <ul>
          <li v-for="email in callMe.callUsEmailList">
          <span class="email_info">
            {{email.email}}
            <el-tooltip effect="light" content="复制" placement="right">
              <el-link :underline="false" icon="el-icon-document-copy" v-clipboard:copy="email.email"></el-link>
            </el-tooltip>
          </span>
          </li>
        </ul>
      </el-card>

      <div class="QR_code">
        <div class="QR_code_sub">
          <image-preview :src="appletImage" width="9rem" height="9rem"/>
          <span>微信公众号</span>
        </div>
        <div class="QR_code_sub">
          <image-preview :src="mtImage" width="9rem" height="9rem"/>
          <span>移动端网址</span>
        </div>
      </div>
    </div>
    <div class="call_me_sub_mt">
      <div class="manager">
        <i class="el-icon-phone-outline common_icon"/>
        <div class="manager_list">
          <div class="manage_item" v-for="manager in callMe.callUsManagerList">
            <span class="name">{{manager.name}}：</span>
            <span class="telephone">{{manager.telephone}}</span>
            <span v-if="manager.isWechat" class="wechat">(微信同号)</span>
          </div>
        </div>
      </div>
      <div class="address">
        <i class="el-icon-location-outline common_icon"/>
        <div class="address_list">
          <div class="address_item" v-for="(address,index) in callMe.callUsAddressList">
            <span class="info">{{address.info}}</span>
          </div>
        </div>
      </div>
      <div class="QR_code">
        <div class="QR_code_sub">
          <image-preview :src="appletImage" class="image"/>
          <span>微信公众号</span>
        </div>
        <div class="QR_code_sub">
          <image-preview :src="mtImage" class="image"/>
          <span>移动端网址</span>
        </div>
      </div>
    </div>
      <footer class="footer">
        <span>&copy;人卫嘉奕（上海）医学科技有限公司</span>
        <span style="margin-left: 2rem;">沪ICP备19005018号</span>
      </footer>
  </div>
</template>

<script>
import {get_call_me_data} from "@/api";

export default {
  name: "Jiayi_call_me_sub",
  components: {},
  computed: {},
  data() {
    return {
      callMe: {},
      appletImage: "http://obs.jy-medtechs.com/rw-jy/qrcode_for_applet.png",
      mtImage: "http://obs.jy-medtechs.com/rw-jy/qrcode_for_mt.png",
    };
  },
  watch: {},
  mounted() {},
  created() {
    this.getCallMeData();
  },
  methods: {
    getCallMeData(){
      get_call_me_data().then(response=>{
        this.callMe = response.callUs;
      })
    },
  }
};
</script>

<style scoped>
.call_me_sub{
  margin: 0 auto;
  width: 100%;
  height: 35vh;
}
.call_me_sub_pc{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.card{
  border-radius: 0.8rem;
}

.manager,.address,.email{
  width: 25%;
  height: 95%;
  background: rgb(238, 245, 254);
}

.card_header{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}


.card_header_title{
  width: 50%;
  font-size: 3rem;
  font-weight: bold;
  font-family: 'dingdingjinbuti';
  text-align: left;
}

.svg_icon{
  width: 5rem;
  height: 5rem
}

.manage_main{
  height: 22vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  overflow: hidden auto;
}
.manage_item{
  width: 95%;
  height: 6rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin: 0.5rem 0 0.5rem 0;
}

.manage_item-info{
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: start;
  font-family: 'xiangfengyizuishiqianyuan';

  .name{
    font-weight: bold;
    font-size: 1.6rem;
  }
  .telephone{
    font-weight: bold;
    font-size: 1.4rem;
  }
}

.address{
  li{
    margin: 0.6rem 0 0.6rem 0;
  }
  .name{
    font-weight: bold;
    font-size: 1.5rem;
  }
  .info{
    font-size: 1.2rem;
  }
}
.email{
  li{
    margin: 0.4rem 0 0.4rem 0;
  }
  .email_info{
    font-weight: bold;
    font-size: 1.3rem;
  }
}

.QR_code{
  width: 15%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.QR_code_sub{
  width: 100%;
  height: 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  font-size: 0.9rem;
  font-weight: bold;
}
.QR_code_sub .image{
  width: 9rem;
  height: 9rem;
}

@font-face {
  font-family: 'dingdingjinbuti';
  src: url('../../assets/font/dingdingjinbuti.ttf'),
}

@font-face {
  font-family: 'xiangfengyizuishiqianyuan';
  src: url('../../assets/font/xiangfengyizuishiqianyuan.ttf'),
}

/*------- 响应式布局 -------*/
/* 手机（小屏幕） */
@media (width <= 992px) {
  html{
    font-size: 14px;
  }
  .call_me_sub{
    height: auto;
  }
  .call_me_sub_pc {
    display: none;
  }
  .call_me_sub_mt {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .manager,.address,.email{
    width: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
  }
  /* 联系经理 */
  .manager_list{
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .manage_item{
    width: 100%;
    height: 1.3rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .manage_item .name{
    font-size: 1.2rem;
  }
  .manage_item .telephone{
    font-size: 1.1rem;
  }
  .manage_item .wechat{
    font-size: 0.95rem;
  }
  .common_icon{
    font-size: 3.3rem;
  }
  /* 联系地址 */
  .address_list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .address_item{
    text-align: center;
    padding-top: 0.3rem;
  }
  .address_item .info{
    font-size: 0.9rem;
  }
  /* 二维码 */
  .QR_code{
    width: 100%;
    height: 8rem;
    display: flex;
    padding-top: 1rem;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .QR_code_sub{
    width: 40vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .QR_code_sub .image{
    width: 6rem;
    height: 6rem;
  }
}

/* ---- 底 ---- */
.footer{
  width: 100%;
  height: 2.5vh;
  background: #333333;
  color: #C0C4CC;
  font-weight: bold;
  font-size: 0.8rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 平板 */
@media (width > 992px) and (width < 1200px) {
  html{
    font-size: 12px;
  }
}

@media (width > 992px) {
  .call_me_sub_mt{
    display: none;
  }
}
</style>
